Durante mucho tiempo, las únicas herramientas disponibles para crear diseños CSS y posicionar elementos con buena compatibilidad entre browsers eran float y position. Sin embargo, estas herramientas tienen algunas limitaciones muy frustrantes, especialmente cuando se trata de responsividad. Algunas tareas que consideramos básicas en un diseño, como centrar verticalmente un elemento secundario en relación con un elemento principal o hacer que los elementos secundarios ocupen la misma cantidad de espacio, o que las columnas tengan el mismo tamaño independientemente de la cantidad de contenido interno, fueron imposibles. o muy difícil de manejar con floats o position, al menos de forma práctica y flexible. La herramienta Flexbox (de Flexible Box) fue creada para hacer estas tareas más sencillas y funcionales: los secundarios de un elemento con Flexbox se pueden posicionar en cualquier dirección y pueden tener dimensiones flexibles para adaptarse.
Estructura:
El Contenedor-Flex es nuestro contenedor padre, y es él quién va a contener a todos los elementos hijos a los cuáles queremos posicionar
El Contenedor-Flex es nuestro contenedor padre, y es él quién va a contener a todos los elementos hijos a los cuáles queremos posicionar.El Elemento-Flex es nuestro elemento hijo, el cual utilizará todo el espacio disponible para ubicarse de acuerdo a las propiedades a las cuales este sometido junto a los demas Elementos-Flex contenidos.
Elementos
Flexbox es un módulo completo y no una propiedad única; algunos de ellos deben declararse en el contenedor (el elemento principal, que llamamos de flex container), mientras que otros deben declararse en los elementos secundarios (el flex ítems). Si el diseño "estándar" se basa en las direcciones block e inline, el diseño Flex se basa en direcciones de "flex flow". A continuación se muestra un diagrama de la especificación, que explica la idea central detrás del diseño Flex